<template>
	<view class="container" :style="appThemeStyle">
		<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption"
			@up="upCallback">
			<!-- tab栏 -->
			<!-- 	<u-tabs :list="tabs" :is-scroll="false" v-model="curTab" :active-color="appTheme.mainBg" :duration="0.2"
				@change="onChangeTab" /> -->

			<u-sticky>
				<view class="u-flex u-row-around tab">
					<view class="tab-item" :class="index == curTab ?'tab-css u-text-pink3' : ''"
						@click="onChangeTab(index)" v-for="item,index in tabs">
						{{item.name}}
					</view>
				</view>
			</u-sticky>
			<!-- 优惠券列表 -->
			<view class="coupon-list u-flex u-flex-wrap u-row-between">
				<view class="item" v-for="item in list.data" @click="goDetail(item)">
					<view class="img">
						<image src="@/static/new/index/couponBg.png" mode="widthFix" class="bg"></image>
						<view class="type u-flex">{{item.coupon_type == 10 ? '满减券' : '折扣券'}}</view>
						<view class="jian u-text-pink2 u-flex-center u-col-bottom">
							<text>{{item.coupon_type == 10 ? Number(item.reduce_price) : item.discount}}</text>{{item.coupon_type == 10 ? '元' : '折'}}
						</view>
						<view class="man u-flex-center u-text-pink3">满{{Number(item.min_price)}}元可用</view>
					</view>
					<view class="tit">{{item.coupon_type == 10 ? '满'+Number(item.min_price) +'元'+ '立减'+Number(item.reduce_price)+'元' : item.discount + '折'}}饮品券</view>
					<view class="money u-text-pink2">{{item.integral_num}}积分</view>
					<view class="btn_wrap u-flex u-row-right">
						<view class="btn u-text-pink3" @click.stop="receive(item.coupon_id)">兑换</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
	import {
		getEmptyPaginateObj,
		getMoreListData
	} from '@/core/app'
	import * as couponApi from '@/api/coupon'
	import {
		CouponTypeEnum
	} from '@/common/enum/coupon'

	const pageSize = 8
	const tabs = [{
		name: `折扣券`,
		value: 20
	}, {
		name: `满减券`,
		value: 10
	}]

	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				// 枚举类
				CouponTypeEnum,
				// 标签栏数据
				tabs,
				//折扣券20;满减券10
				coupon_type: 20,
				// 当前标签索引
				curTab: 0,
				// 优惠券列表数据
				list: getEmptyPaginateObj(),
				// 上拉加载配置
				upOption: {
					// 首次自动执行
					auto: true,
					// 每页数据的数量; 默认10
					page: {
						per_page: pageSize
					},
					// 数量要大于4条才显示无更多数据
					noMoreSize: 4,
					// 空布局
					empty: {
						tip: '亲，暂无相关优惠券'
					}
				}
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {

		},
		methods: {
			/**
			 * 上拉加载的回调 (页面初始化时也会执行一次)
			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			 * @param {Object} page
			 */
			upCallback(page) {
				const app = this
				// 设置列表数据
				app.getCouponList(page.num)
					.then(list => {
						const curPageLen = list.data.length
						const totalSize = list.data.total
						app.mescroll.endBySize(curPageLen, totalSize)
					})
					.catch(() => app.mescroll.endErr())
			},

			// 获取优惠券列表
			getCouponList(pageNo = 1) {
				const app = this
				return new Promise((resolve, reject) => {
					couponApi.list({
							page: pageNo,
							per_page: 8,
							integralType: 20,
							coupon_type: app.coupon_type
						}, {
							load: false
						})
						.then(result => {
							// 合并新数据
							const newList = result.data.list
							app.list.data = getMoreListData(newList, app.list, pageNo)
							resolve(newList)
						})
				})
			},

			// 切换标签项
			onChangeTab(index) {
				const app = this
				// 设置当前选中的标签
				app.curTab = index
				// 查询券的类型（折扣券20;满减券10）
				app.coupon_type = this.tabs[index].value
				// 刷新优惠券列表
				app.onRefreshList()
			},

			// 刷新优惠券列表
			onRefreshList() {
				this.list = getEmptyPaginateObj()
				setTimeout(() => {
					this.mescroll.resetUpScroll()
				}, 120)
			},

			// 确认兑换弹窗 (系统默认)
			receive(couponId) {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '确认要兑换该优惠券吗？',
					success(o) {
						o.confirm && app.receiveEvent(couponId)
					}
				})
			},

			// 确认兑换事件
			receiveEvent(couponId) {
				const app = this
				couponApi.receive(couponId)
					.then(result => {
						// 显示成功信息
						app.$success(result.message)
						// 刷新优惠券列表
						app.onRefreshList()
					})
			},
			
			//优惠券详情
			goDetail(item){
				uni.navigateTo({
					url:'/pages/index/store/detail?item=' + JSON.stringify(item) + '&type=1'
				})
			}
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	// 切换栏
	.tab {
		background: #fff;
		padding: 0rpx 0 15rpx;

		.tab-item {
			border-radius: 50rpx;
			padding: 10rpx 33rpx;
		}

		.tab-css {
			color: #fff;
		}
	}

	// 数组
	.coupon-list {
		padding: 20rpx;
		border-top: 1rpx solid #eee;

		.item {
			width: 48%;
			margin-bottom: 50rpx;

			.img {
				height: 218rpx;
				background: #eee;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				position: relative;
				overflow: hidden;
				
				.bg{
					position: absolute;
					width: 100%;
					top: 0;
					left: 0;
				}

				.type {
					position: absolute;
					left: 0;
					width: 19%;
					height: 210rpx;
					font-size: 36rpx;
					padding: 0 10rpx;
					font-weight: bold;
					color: #fff;
					text-align: center;
				}

				.jian {
					position: absolute;
					right: 0;
					width: 51%;
					height: 110rpx;
					font-weight: bold;
					font-size: 40rpx;
					padding-right: 20rpx;

					text {
						height: 100rpx;
						font-size: 90rpx;
					}
				}

				.man {
					width: 174rpx;
					position: absolute;
					right: 20rpx;
					bottom: 30rpx;
					font-size: 28rpx;
					padding: 5rpx 0;
					border-radius: 30rpx;
					color: #fff;
				}
			}

			.tit {
				color: #333;
			}

			.money {
				font-size: 26rpx;
				margin: 20rpx 0;
			}

			.btn_wrap {


				.btn {
					color: #fff;
					width: 100rpx;
					padding: 7rpx;
					font-size: 24rpx;
					text-align: center;
					border-radius: 30rpx;
				}
			}
		}
	}
</style>